<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<canvas id="mycanvas" width="500px" height="500px" style="border:1px solid #ccc"> </canvas>


</body>
</html>
<script type="text/javascript">
	var canvas = document.getElementById("mycanvas");
	var context = canvas.getContext('2d');
	context.fillStyle="#eeeeef";
	context.fillRect(0,0,400,400);
	var dx =150;
	var dy =150;
	var s = 100;
	context.beginPath();
	context.fillStyle = "rgb(100,255,100)";
	context.strokeStyle = "rgb(0,0,100)";
	var x = Math.sin(0);
	var y = Math.cos(0);
	var dig = Math.PI/15*11;/*  dig里PI可以改，如果改成PI/2则是平行四边形，如果改成PI/3则是六边形  */
	for (var i = 0; i < 30; i++) {
		var x = Math.sin(i*dig);
		var y = Math.cos(i*dig);
		context.lineTo(dx+x*s,dy+y*s);
	}
	context.closePath();
	context.fill();
	context.stroke()
</script>
